import React from 'react';
import { Avatar, message, Dropdown } from 'antd';
import { useNavigate } from 'react-router-dom'
import { UserOutlined } from '@ant-design/icons';
import { logout } from '@/api/url'
import styles from './layout.module.scss'

const Layout = (props) => {
    const navigate = useNavigate()
    const outerIdx = props.children.findIndex(item => item.key === 'outer')
    const outLogin = async () => {
        await logout()
        message.success('退出成功')
        navigate('/login')
    }
    const items = [
        {
            key: '1',
            label: (
                <div onClick={() => outLogin()}>
                    退出登录
                </div>
            ),
        },
    ]
    return (
        <div className={styles.layout}>
            <div className={styles.header}>
                <div>算法加固平台</div>
                <div className={styles.avatar} >
                    <Dropdown
                        menu={{
                            items
                        }}
                        placement="bottom"
                        arrow
                    >
                        <Avatar size={40} icon={<UserOutlined />} style={{ background: '#007FF5' }} />
                    </Dropdown>
                </div>
            </div>
            <div className={styles.page}>
                {outerIdx !== -1 && <div style={{ padding: 10, boxSizing: 'border-box' }}>
                    {props.children[outerIdx]}
                </div>}
                <div className={styles.main}>{props.children.slice(outerIdx + 1)}</div>
            </div>
        </div>
    );
}

export default Layout;
